<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页</title>
  <!-- 引入Vue2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>用户管理页</h1>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.role.name }}</td>
            <td>{{ user.status==1?'启用':'禁用' }}</td>
            <td>
                <button @click="showUpdateFrom(user.id)">编辑</button>
            </td>
        </tr>
        </tbody>
    </table>
    <button @click="showAddForm">新增</button>
    <hr/>
    <form @submit.prevent="saveUser" v-show="showSaveForm">
        用户ID:
        <input type="text" name="id" :value="currentUser.id" readonly><br/>
        用户名:
        <input type="text" name="username" v-model="currentUser.username"><br/>
        密码:
        <input type="text" name="password" v-model="currentUser.password"><br/>
        角色:
        <select name="roleId" v-model="currentUser.roleId">
            <option v-for="role in roles" :value="role.id">{{ role.name }}</option>
        </select><br/>
        状态:
        <select name="status" v-model="currentUser.status">
            <option value="1">启用</option>
            <option value="0">禁用</option>
        </select><br/>
        <button>保存</button>
    </form>

</div>
<script>
  // 设置axios的默认baseURL
  axios.defaults.baseURL = 'http://localhost:8080';

  // 创建Vue实例
  const app = new Vue({
    el: '#app',
    data: {
      users: [],
      roles: [],
      showSaveForm: false,
      currentUser: {
        id: '',
        username: '',
        roleId: '',
        status: '',
          password:''
      }
    },
    created() {
      // 页面加载时获取用户列表
     this.loadUsers();

      // 页面加载时获取角色列表
      axios.get('/role/getall')
       .then(response => {
          if (response.data.success) {
            this.roles = response.data.data;
          }
        })
       .catch(error => {
          console.error('获取角色列表失败', error);
        });
    },
    methods: {
        loadUsers() {
            axios.get('/user/getall')
                .then(response => {
                    if (response.data.success) {
                        this.users = response.data.data;
                    }
                })
                .catch(error => {
                    console.error('获取用户列表失败', error);
                });
        },
      showUpdateFrom(id) {
        //查询用户信息
        axios.get(`/user/getById/${id}`)
          .then(response => {
            if (response.data.success) {
              this.showSaveForm = true;
              this.currentUser = response.data.data;
            }
          })
      },
        showAddForm() {
          this.showSaveForm = true;
          this.currentUser = {
            id: '',
            username: '',
            roleId: '',
            status: '1'
          };
          //默认选中第一个角色
          if (this.roles.length > 0) {
            this.currentUser.roleId = this.roles[0].id;
          }
        },

        saveUser() {
          // 提交表单数据
          axios.post('/user/save', this.currentUser)
            .then(response => {
              if (response.data.success) {
                alert('保存成功');
                this.loadUsers();
              }
            })
        }
    }
  })
</script>
</body>
</html>